<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>管理员个人中心</title>
    <link rel="stylesheet" href="css/adminPersonalCenter.css">
    <script src="js/jquery.min.js"></script>
</head>
<body>

<div class="main-wrapper">
    <div class="sidebar">
        <h3>医院病例管理系统</h3>
        <ul>
            <li><a href="./adminUserList.html">用户管理</a></li>
            <li><a href="./adminMedicalRecordList.html">病历管理</a></li>
            <li><a href="./adminPersonalCenter.html" class="active">个人信息管理</a></li>
            <li><a href="./adminMedicalTemplate.html">病历模板管理</a></li>
            <li><a href="./adminUpdateRequest.html">信息修改申请</a></li>
        </ul>
    </div>
    <div class="main-content">
        <div id="personalInfoSection" class="info-card">
            <h2>管理员个人信息</h2>
            <form id="personalInfoForm">

                <div class="form-row">
                    <div class="form-group">
                        <label for="avatar">头像</label>
                        <div>
                            <div id="avatarPreview" class="avatar-preview" style="display: none;">
                                <img src="" alt="Avatar">
                            </div>
                            <div id="avatarUpload" class="avatar-upload-area">
                                +
                            </div>
                            <small class="form-text">点击上传头像</small>
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="hidden" id="avatarPath">
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="username">账号</label>
                        <input type="text" class="form-control" id="username" readonly>
                    </div>
                    <div class="form-group">
                        <label for="nickname">昵称</label>
                        <input type="text" class="form-control" id="nickname" >
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="gender">性别</label>
                        <select class="form-control" id="gender">
                            <option value="0">男</option>
                            <option value="1">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="age">年龄</label>
                        <input type="text" class="form-control" id="age" >
                    </div>
                </div>


                <div class="form-row">
                    <div class="form-group">
                        <label for="phone">手机号码</label>
                        <input type="text" class="form-control" id="phone" >
                    </div>
                    <div class="form-group">
                        <label for="email">邮箱</label>
                        <input type="text" class="form-control" id="email" >
                    </div>
                </div>

                <button type="button" class="btn btn-secondary" id="modifyInfoButton">修改</button>
            </form>
        </div>

        <!-- Placeholder for other sections like Change Password -->

    </div>
</div>

<script>
    $(function(){
        const backendBaseUrl = 'http://localhost:8080';

        // 获取当前用户信息
        function loadUserInfo() {
            $.ajax({
                url: backendBaseUrl + '/user/current',
                type: 'GET',
                xhrFields: { withCredentials: true },
                success: function(res) {
                    if(res.code === 0 && res.data) {
                        $('#username').val(res.data.username);
                        $('#nickname').val(res.data.nickname);
                        $('#gender').val(res.data.gender);
                        $('#age').val(res.data.age || '');
                        $('#phone').val(res.data.phone || '');
                        $('#email').val(res.data.email || '');
                        $('#avatarPath').val(res.data.avatar || '');

                        // 处理头像
                        if(res.data.avatar) {
                            $('#avatarPreview img').attr('src', res.data.avatar);
                            $('#avatarPreview').show();
                            $('#avatarUpload').hide();
                            $('#avatarUpload').next('small').hide();
                        } else {
                            $('#avatarPreview').hide();
                            $('#avatarUpload').show();
                            $('#avatarUpload').next('small').show();
                        }
                    } else {
                        alert('获取用户信息失败: ' + (res.message || ''));
                    }
                },
                error: function() {
                    alert('获取用户信息失败，请稍后重试');
                }
            });
        }

        // 页面加载时获取用户信息
        loadUserInfo();

        // 处理修改按钮点击
        $('#modifyInfoButton').click(function() {
            var userData = {
                nickname: $('#nickname').val(),
                phone: $('#phone').val(),
                email: $('#email').val(),
                age: $('#age').val(),
                gender: $('#gender').val(),
                username: $('#username').val(),
                avatar: $('#avatarPath').val()
            };

            $.ajax({
                url: backendBaseUrl + '/user/update',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(userData),
                xhrFields: { withCredentials: true },
                success: function(res) {
                    if(res.code === 0) {
                        alert('个人信息更新成功');
                        loadUserInfo();
                    } else {
                        alert(res.message || '更新失败');
                    }
                },
                error: function() {
                    alert('更新失败，请稍后重试');
                }
            });
        });

        // 添加隐藏的文件输入框
        $('.form-group').has('label[for="avatar"]').append('<input type="file" id="avatarFileInput" accept="image/*" style="display: none;">'
        );

        // 处理头像上传
        $('#avatarFileInput').on('change', function(e) {
            var file = e.target.files[0];
            if (file) {
                var formData = new FormData();
                formData.append('file', file);

                $.ajax({
                    url: backendBaseUrl + '/user/upload/avatar',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    xhrFields: { withCredentials: true },
                    success: function(res) {
                        if(res.code === 0) {
                            $('#avatarPreview img').attr('src', res.data);
                            $('#avatarPreview').show();
                            $('#avatarPath').val(res.data);
                            // 当上传新头像后，隐藏上传区域和提示文本
                            $('#avatarUpload').hide();
                            $('#avatarUpload').next('small').hide();

                        } else {
                            alert(res.message || '头像上传失败');
                        }
                    },
                    error: function() {
                        alert('头像上传失败，请稍后重试');
                    }
                });
            }
        });

        // 触发文件选择
        $('#avatarUpload, #avatarPreview').click(function() {
             $('#avatarFileInput').click();
        });

        // 侧边栏激活状态处理
        // 侧边栏激活状态处理
        $('.sidebar ul li a').removeClass('active');
        $('.sidebar ul li a[href="./adminPersonalCenter.html"]').addClass('active');

    });
</script>

</body>
</html> 